<template>
  <cl-dialog title="编辑对账明细" width="450px" :visible.sync="visible" :before-close="beforeClose" @close="close" :props="{
    top: '10vh',
    appendToBody: true,
    closeOnClickModal: false
  }">
    <el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
      <!-- <el-form-item label="我方应得" prop="our_deserved">
        <el-input v-model="form.our_deserved"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%;" label="医院应得" prop="another_deserved">
        <el-input v-model="form.another_deserved"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%;" label="应收款/应返款" prop="debt">
        <el-input v-model="form.debt"></el-input>
      </el-form-item>-->
      <el-form-item label="合作分成方式" prop="allocation_id">
        <cl-select clearable v-model="form.allocation_id" style="width: 100%">
          <el-option :key="0" :value="0" label="空" />
          <el-option v-for="item in profitList" :key="item.id" :value="item.id" :label="item.name" />
        </cl-select>
      </el-form-item>
      <el-form-item style="width: 100%;" label="未消耗金额" prop="no_cost">
        <el-input v-model="form.no_cost"></el-input>
      </el-form-item>

      <el-form-item label="图片" prop="images">
        <cl-upload :multiple="true" :limit="5" :limitSize="5" list-type="picture-card"
          @change="(val => form.images = val)" v-model="form.images" />
      </el-form-item>
      <el-form-item style="width: 100%;" label="备注">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :loading="saving">确定</el-button>
    </template>
  </cl-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      saving: false,
      order_no: null,
      form: {},
      rules: {
        our_deserved: [{ required: true, message: "我方应得必填" }],
        another_deserved: [{ required: true, message: "医院应得必填" }],
        debt: [{ required: true, message: "应返款/应收款必填" }],
        // allocation_id: [{ required: true, message: "分成方式必选" }]
      },
      profitList: []
    };
  },
  methods: {
    open(data = {}) {
      this.visible = true;
      this.form = data;
      console.log(this.form, 'form');
      this.form.images = this.form.images.join(',')
      this.getprofitList()
    },
    async getprofitList() {
      let res = await this.$service.reconciliation.deptAllocationPlanList({ dept_id: this.form.dept_id, hasPage: false });
      this.profitList = res

    },
    submit() {
      this.$refs.form.validate(async (valid, errors) => {
        if (!valid) return;
        try {
          this.saving = true;
          let params = this.$TOOL.objCopy(this.form);
          params.images = this.form.images.split(",");
          await this.$service.reconciliation.orderEdit(params);
          this.$message.success("操作成功");
          this.$emit("successed");
          this.saving = false;
          this.close();
        } catch (error) {
          this.saving = false;
        }
      });
    },
    beforeClose(done) {
      if (this.saving) return;
      done();
    },
    close() {
      if (this.saving) return;
      this.visible = false;
      this.reset();
    },
    reset() {
      this.saving = false;
      this.$refs.form.resetFields();
    }
    //获取人员
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio {
    margin-bottom: 10px !important;
  }
}
</style>
